<template>
  <view class="wrap">
    <uv-navbar :fixed="false" title="我收到的调研&活动" autoBack safeAreaInsetTop placeholder :border='false'></uv-navbar>
    <view class="tabs">
      <uv-tabs :list="tabList" :current='current' :scrollable='false' lineColor='#E43222' lineWidth='36rpx' lineHeight='6rpx' itemStyle='height: 90rpx' activeStyle='font-weight: 500; font-size: 28rpx; color: #2B2B2B;' inactiveStyle='font-weight: 500; font-size: 28rpx; color: #999999;' @click="tabClick"></uv-tabs>
    </view>
    <view class="base" v-if="!showLeng">
      <view class="list">
        <view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item.survey_info)">
          <view class="content">
            <view class="icon">
              <image src="../../static/invest1.png" class="img"></image>
            </view>
            <view class="right">
              <view class="title">{{ item.survey_info.target_name }}</view>
              <view class="desc">时间：{{ timeFormat(item.survey_info.start_time, 'yyyy年mm月dd日 hh:MM') }}</view>
              <view class="desc">城市：{{ item.city }}</view>
            </view>
          </view>
          <uv-icon name='arrow-right' size='32rpx' color="#B8B8B8"></uv-icon>
        </view>
      </view>
    </view>
    <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
    
  </view>
</template>

<script setup>
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { post } from '@/api';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

const tabList = [
  { name: '我收到的邀请' },
  { name: '我报名的调研' }
];
let current = ref(0);
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);

onLoad((option) => {
  current.value = option.index;
  getList();
})
// 下拉刷新
onPullDownRefresh(() => {
  page = 1
  list.value = [];
  getList();
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  getList();
})

function getList(){
  const params = {
    type: Number(current.value) + 1,
    limit,
    page
  }
  
  post('api/survey/myEnrollList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function tabClick(row){
  current.value = row.index;
  page = 1;
  list.value = [];
  getList();
}
function goDetail(row){
  uni.navigateTo({
    url: `/pages/invest/detail?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .base{
    padding-top: 30rpx;
    .list{
      width: 100%;
      background-color: #fff;
      padding: 0 30rpx;
      .item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 165rpx;
        border-bottom: 1px solid #E6E6E6;
        &:last-child{
          border-bottom: 0;
        }
        .content{
          flex: 1;
          width: 0;
          display: flex;
          align-items: center;
          .right{
            flex: 1;
            width: 0;
            padding-left: 30rpx;
            .desc{
              font-weight: 400;
              font-size: 24rpx;
              color: #999999;
              padding-top: 8rpx;
            }
            .title{
              font-weight: 500;
              font-size: 32rpx;
              color: #2B2B2B;
            }
          }
          .icon{
            width: 80rpx;
            height: 80rpx;
            font-size: 0;
          }
        }
      }
    }
  }
  .tabs{
    background-color: #fff;
    width: 100%;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>